<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.js"></script>
</head>

<body>
    <div style="width:100%;height:800px" id="main"></div>
</body>

</html>
<script>
    //   获取dom
    let main = document.querySelector('#main')
    // 初始化
    let obj = echarts.init(main)
    let option = {

        xAxis: {

        },

        yAxis: {

        },
        // 提示框
        tooltip: {},
        series: [
            {
                // 散点图
                type: 'scatter',
                // 散点图数据
                data: [
                    [10.0, 8.04],
                    [8.07, 6.95],
                    [13.0, 7.58],
                    [9.05, 8.81],
                    [11.0, 8.33],
                    [14.0, 7.66],
                    [13.4, 6.81],
                    [10.0, 6.33],
                    [14.0, 8.96],
                    [12.5, 6.82],
                    [9.15, 7.2],
                    [11.5, 7.2],
                    [3.03, 4.23],
                    [12.2, 7.83],
                    [2.02, 4.47],
                    [1.05, 3.33],
                    [4.05, 4.96],
                    [6.03, 7.24],
                    [12.0, 6.26],
                    [12.0, 8.84],
                    [7.08, 5.82],
                    [5.02, 5.68]
                ],
                // 散点图大小
                symbolSize: 20,
                // 图形的颜色
                color: {
                    // 线性渐变
                    type: 'linear',
                    // 相当于在图形包围盒中的百分比
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    // 散点图的颜色
                    colorStops: [
                        {
                            offset: 0,
                            color: '#00ccff'
                        },
                        {
                            offset: 1,
                            color: 'rgba(255,173,2,0.7)'
                        },
                    ]

                },
                // 散点图的高亮效果
                emphasis: {
                    itemStyle: {
                        borderColor: 'rgba(100,200,50,0.5)',
                        borderWidth: 100,
                    }
                }
            }
        ]
    }
    obj.setOption(option)
</script>